<template>
  <view class="write-review-container">
    <!-- 评分选择 -->
    <view class="rating-section">
      <text class="section-title">服务评分</text>
      <view class="star-rating">
        <view class="star-item" v-for="i in 5" :key="i" @click="selectRating(i)">
          <u-icon :name="rating >= i ? 'star-fill' : 'star'" color="#FFCC33" size="40"></u-icon>
        </view>
      </view>
      <text class="rating-text">{{ ratingText }}</text>
    </view>
    
    <!-- 评价内容 -->
    <view class="content-section">
      <text class="section-title">评价内容</text>
      <view class="textarea-container">
        <textarea 
          class="review-textarea" 
          v-model="content" 
          placeholder="请分享您的服务体验，帮助我们提升服务质量" 
          maxlength="500"
        ></textarea>
        <text class="word-count">{{ content.length }}/500</text>
      </view>
    </view>
    
    <!-- 上传图片 -->
    <view class="upload-section">
      <text class="section-title">上传图片（选填）</text>
      <view class="upload-container">
        <view class="image-list">
          <view class="image-item" v-for="(image, index) in images" :key="index">
            <image :src="image" mode="aspectFill"></image>
            <view class="delete-btn" @click="deleteImage(index)">
              <u-icon name="close" color="#fff" size="20"></u-icon>
            </view>
          </view>
          <view class="upload-btn" @click="chooseImage" v-if="images.length < 6">
            <u-icon name="camera-fill" color="#999" size="40"></u-icon>
            <text>上传图片</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 匿名选项 -->
    <view class="anonymous-section">
      <text>匿名评价</text>
      <switch @change="toggleAnonymous" :checked="isAnonymous" color="#FFCC33" />
    </view>
    
    <!-- 提交按钮 -->
    <view class="submit-btn" @click="submitReview" :class="{ 'disabled': !canSubmit }">
      <text>提交评价</text>
    </view>
  </view>
</template>

<script>
// 页面配置
export default {
  navigationBarTitleText: '写评价',
  navigationBarBackgroundColor: '#0c3441',
  navigationBarTextStyle: 'white'
}
</script>

<script setup>
import { ref, computed } from 'vue';
import modal from '@/plugins/modal';

// 评分
const rating = ref(5);
const ratingText = computed(() => {
  const texts = ['很差', '较差', '一般', '不错', '很好'];
  return texts[rating.value - 1];
});

// 评价内容
const content = ref('');

// 上传的图片
const images = ref([]);

// 是否匿名
const isAnonymous = ref(false);

// 是否可以提交
const canSubmit = computed(() => {
  return rating.value > 0 && content.value.trim().length > 0;
});

// 选择评分
function selectRating(value) {
  rating.value = value;
}

// 选择图片
function chooseImage() {
  uni.chooseImage({
    count: 6 - images.value.length,
    sizeType: ['compressed'],
    sourceType: ['album', 'camera'],
    success: (res) => {
      images.value = [...images.value, ...res.tempFilePaths];
    }
  });
}

// 删除图片
function deleteImage(index) {
  images.value.splice(index, 1);
}

// 切换匿名状态
function toggleAnonymous(e) {
  isAnonymous.value = e.detail.value;
}

// 提交评价
function submitReview() {
  if (!canSubmit.value) {
    return;
  }
  
  // 这里应该调用API提交评价数据
  // 模拟提交
  modal.msgSuccess('评价提交成功');
  setTimeout(() => {
    uni.navigateBack();
  }, 1500);
}
</script>

<style lang="scss">
page {
  background-color: #f8f8f8;
}

.write-review-container {
  padding: 30rpx;
  
  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
    display: block;
  }
  
  .rating-section {
    background-color: #ffffff;
    border-radius: 20rpx;
    padding: 30rpx;
    margin-bottom: 30rpx;
    box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
    
    .star-rating {
      display: flex;
      justify-content: center;
      margin: 30rpx 0;
      
      .star-item {
        margin: 0 10rpx;
      }
    }
    
    .rating-text {
      text-align: center;
      font-size: 28rpx;
      color: #FFCC33;
      display: block;
    }
  }
  
  .content-section {
    background-color: #ffffff;
    border-radius: 20rpx;
    padding: 30rpx;
    margin-bottom: 30rpx;
    box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
    
    .textarea-container {
      position: relative;
      
      .review-textarea {
        width: 100%;
        height: 300rpx;
        padding: 20rpx;
        box-sizing: border-box;
        border: 1px solid #eee;
        border-radius: 10rpx;
        font-size: 28rpx;
      }
      
      .word-count {
        position: absolute;
        bottom: 20rpx;
        right: 20rpx;
        font-size: 24rpx;
        color: #999;
      }
    }
  }
  
  .upload-section {
    background-color: #ffffff;
    border-radius: 20rpx;
    padding: 30rpx;
    margin-bottom: 30rpx;
    box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
    
    .upload-container {
      .image-list {
        display: flex;
        flex-wrap: wrap;
        
        .image-item, .upload-btn {
          width: 160rpx;
          height: 160rpx;
          margin-right: 20rpx;
          margin-bottom: 20rpx;
          border-radius: 10rpx;
          overflow: hidden;
        }
        
        .image-item {
          position: relative;
          
          image {
            width: 100%;
            height: 100%;
          }
          
          .delete-btn {
            position: absolute;
            top: 0;
            right: 0;
            width: 40rpx;
            height: 40rpx;
            background-color: rgba(0,0,0,0.5);
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
        
        .upload-btn {
          border: 1px dashed #ddd;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          
          text {
            font-size: 24rpx;
            color: #999;
            margin-top: 10rpx;
          }
        }
      }
    }
  }
  
  .anonymous-section {
    background-color: #ffffff;
    border-radius: 20rpx;
    padding: 30rpx;
    margin-bottom: 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
    
    text {
      font-size: 32rpx;
    }
  }
  
  .submit-btn {
    background-color: #FFCC33;
    color: #333;
    font-size: 32rpx;
    text-align: center;
    padding: 25rpx 0;
    border-radius: 10rpx;
    margin-top: 50rpx;
    
    &.disabled {
      background-color: #ddd;
      color: #999;
    }
  }
}
</style>